<template>
	<view class="nearby-store-item e-p-20 e-m-t-20 e-flex bg-white "
		@tap="$goTo('/pages/nearby/store/info',{id:info.id})">
		<view class="nearby-store-item__logo">
			<load-image  size="180rpx" :src="info.logo"  radius="20rpx">
			</load-image>
		</view>
		<view class="nearby-store-item__content e-flex-1 e-m-l-20">
			<view class="nearby-store-item__title e-flex ">
				<view class="e-flex-1 e-line-1 e-m-r-26 c-34 fw-600">
					{{ info.name }}
				</view>
			</view>
			<view class="e-m-t-20 e-flex e-font-24">
				<view class="e-flex-1 e-flex">
					<image v-for="item in starNum" src="/static/nearby/star.png" class="img-20 e-m-r-10"></image>
					<image v-for="item in greyStarNum" src="/static/nearby/grey-star.png" class="img-20 e-m-r-10">
					</image>
				</view>
				<view class="c-secondary e-m-l-20">{{ info.evaluateCount }} {{ $t('nearby.条评价') }}</view>
			</view>
<!-- 			<view class="e-flex e-p-t-10" v-if="info.fee">
				<view class="e-p-l-10 e-p-r-10 e-p-t-4 e-p-b-4 e-radius-10 bg-primary" >
					<text class="c-white e-font-24">{{$accDiv(100 - info.fee,10)}}折</text>
				</view>
			</view> -->
			<view class="e-m-t-18 e-flex e-m-b-30">
				<view class="e-flex e-flex-1">
					<view class="store-item-add e-font-24 c-secondary e-line-1">{{ info.licenseAddrText }}</view>
				</view>
				<text class="c-secondary e-font-24">{{ distance }}</text>
			</view>
			<view class="e-m-b-14 e-flex" v-for="item in info.products">
				<text class="e-font-28 c-red">{{$unitEn}}</text>
				<text class="e-font-28 c-red e-m-r-10">{{item.price}}</text>
				<text v-if="item.priceScribing" class="e-font-24 e-m-r-10 c-secondary"
					style="text-decoration: line-through;">{{$unitEn}}{{item.priceScribing}}</text>
				<text class="e-flex-1 e-line-1 c-333 e-font-26">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import type { SearchStoreItem } from '@/common/request/api'
	const props = defineProps<{
		info : SearchStoreItem
	}>()


	const distance = computed(() => {

		return props.info.distance > 1000 ? `${(props.info.distance / 1000).toFixed(1)}km` : `${props.info.distance}m`

	})
	const starNum = computed(() => {
		return Math.floor(props.info.averageScore)
	})
	const greyStarNum = computed(() => {
		return Math.ceil(5 - Math.floor(props.info.averageScore))
	})
</script>

<style lang="scss" scoped>
	.c-fd {
		color: #fd6d00;
	}

	.store-item-add {
		width: 312rpx;
	}

	.nearby-store-item {
		border-radius: 20rpx;
		align-items: flex-start;

		&__logo {
			flex: 0 0 180rpx;
			height: 180rpx;
		}

		&__content {
			overflow: hidden;
		}

		&__title {
			overflow: hidden;
		}
	}
</style>